<template>
  <div>
    <van-sticky>
      <div class="header flex-row flex-align-center">
        <!-- <div class="header-left" @click="handleSelect">
          <div class="header-left-list-item"></div>
          <div class="header-left-list-item"></div>
          <div class="header-left-list-item"></div>
          <div class="header-left-list-item-text">筛选</div>
        </div> -->

        <div class="header-left" @click="handleSelect">
          <img v-if="screenFlag" src="./img/search.png" />
          <img v-if="!screenFlag" src="./img/shaixuan.png" />
        </div>
        <div class="header-right">
          <van-field
            left-icon="search"
            clearable
            v-model="popSelectInfo.productName"
            placeholder="请输入保险产品名称"
            @click="
              $router.push({ path: '/searchHistory', query: $route.query })
            "
          />
        </div>
      </div>
    </van-sticky>
    <div class="header-tab">
      <van-tabs v-model="active" @change="handleChangeTab">
        <van-tab
          v-for="(item, index) in proTypeList"
          :key="index"
          :title="item.label"
          :name="item.value"
        ></van-tab>
      </van-tabs>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="pro-list">
        <div
          class="pro-list-item flex-row"
          v-for="item in list"
          :key="item.index"
          @click="judgeProductClick(item)"
        >
          <div class="pro-list-item-left">
            <HotsaleIcon v-if="item.isHot === 'Y'" />
            <div>
              <img class="pro-list-item-left-bg" :src="item.logoUrl" />
            </div>
          </div>
          <div class="pro-list-item-right">
            <div class="flex-row">
              <div class="pro-list-item-right-title">
                {{ item.productName }}
              </div>
              <div
                :class="
                  item.isOnline === 'Y'
                    ? 'pro-list-item-right-title-text'
                    : 'active'
                "
              >
                {{ item.isOnline === 'Y' ? '线上' : '线下' }}
              </div>
            </div>
            <div class="pro-list-item-right-desc flex-row">
              <div>{{ item.productAbbrDescription }}</div>
            </div>
            <div class="pro-list-item-right-protype">
              <div
                v-for="item in getLabelList(item.customLabel)"
                :key="item.index"
              >
                {{ item }}
              </div>
            </div>
            <div class="pro-list-item-right-money">
              {{ item.startPrice }}
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <van-popup class="pop-select" v-model="popShow" position="left">
      <popSelect
        @close="handleClosePop"
        @confirm="handelConfirm"
        @reset="handelReset"
        :productMethodList="productMethodList"
        :orgList="orgList"
        :proTypeList="proTypeListSel"
        :productType="$route.query.active ? $route.query.active : ''"
        ref="popSelect"
      />
    </van-popup>
  </div>
</template>
<script>
import HotsaleIcon from '@/components/hotsale'
import popSelect from './components/popSelect'
import API from '@/services/h5/product'
import { mapState, mapMutations } from 'vuex'
import judgeProClick from '@/mixin/judgeProClick'
import Cookie from 'js-cookie'
export default {
  components: { HotsaleIcon, popSelect },
  mixins: [judgeProClick],
  computed: {
    ...mapState('account', ['user'])
  },
  data() {
    return {
      active: '',
      popShow: false,
      proTypeList: [
        {
          label: '热销',
          value: ''
        }
      ],
      productMethodList: [],
      orgList: [],
      proTypeListSel: [],
      list: [],
      popSelectInfo: {
        isOnline: '', // 出单方式
        isWanliPrefer: '', // 是否是万利优选
        partnerId: [], // 合作机构
        productName: '', // 产品名称
        productSubType: '' // 产品子类型
      },
      curPage: 0,
      length: 10,
      loading: false,
      finished: false,
      screenFlag:true,
      productSubTypeName: '',
      changeFlag:false,
      newParams:{}
    }
  },
  created() {
    this.init()
    this.onLoad()
  },
  methods: {
    ...mapMutations('product', ['setProductInfo']),
    async init() {
      this.popSelectInfo.productName = this.$route.query.productName
        ? this.$route.query.productName
        : ''
      this.popSelectInfo.isOnline = this.$route.query.active
        ? this.$route.query.active
        : ''
      // 获取到产品子类型数据
      let result = await Promise.all([
        API.getprodListBypartner(),
        API.getprodListBysubType(),
        API.getprodListByInOnline()
      ])
      let company = result[0]
      let prodType = result[1]
      let res = result[2]
      if (company.data && company.data.code === 1000) {
        company.data.data.map(item => {
          this.orgList.push({
            label: item.partnerName,
            value: item.partnerId
          })
        })
      }
      if (prodType.data && prodType.data.code === 1000) {
        prodType.data.data.map(item => {
          this.proTypeList.push({
            label: item.productSubTypeName,
            value: item.productSubType
          })
          this.proTypeListSel.push({
            label: item.productSubTypeName,
            value: item.productSubType
          })
        })
      }
      if (res.data && res.data.code === 1000) {
        res.data.data.map(item => {
          this.productMethodList.push({
            label: item.issueName,
            value: item.issueCode
          })
        })
      }
    },
    async onLoad() {
      this.loading = true
      this.finished = false
      this.curPage += 1
      let params = {}
      // console.log('params值：',JSON.parse(Cookie.get('paramsPro')))
      let paramsPro = undefined
      if(Cookie.get('paramsPro')) {
        paramsPro = JSON.parse(Cookie.get('paramsPro'))
      }
      if((Cookie.get('cookieOrgSel') && JSON.parse(Cookie.get('cookieOrgSel')).length > 0) || Cookie.get('cookieprodMeSel') || Cookie.get('cookieProTypeSel')) {
        this.screenFlag = false
      }
      //console.log('标签页传参','parasPro',paramsPro,this.popSelectInfo.productName,"+++++++",this.productSubTypeName)
      // this.popSelectInfo.productName = this.productSubTypeName
      if(paramsPro) {
        console.log(111111,paramsPro,'++',this.productSubTypeName,paramsPro.proTypeSel?paramsPro.proTypeSel:this.productSubTypeName)
        params = {
          curPage: this.curPage,
          length: this.length,
          isOnline: paramsPro.prodMeSel.length>0?paramsPro.prodMeSel:this.popSelectInfo.isOnline,
          isWanliPrefer: this.popSelectInfo.isWanliPrefer,
          partnerId: paramsPro.partnerId.length > 0?paramsPro.partnerId:this.popSelectInfo.partnerId,
          productName: this.popSelectInfo.productName,
          productSubType: paramsPro.proTypeSel.length>0?paramsPro.proTypeSel:this.productSubTypeName
        }
        
      }else {
        console.log(22222)
        params = {
          curPage: this.curPage,
          length: this.length,
          isOnline: this.popSelectInfo.isOnline,
          isWanliPrefer: this.popSelectInfo.isWanliPrefer,
          partnerId: this.popSelectInfo.partnerId,
          productName: this.popSelectInfo.productName,
          productSubType: this.productSubTypeName
        }
      }
      
      // console.log('查询传参',params)
      // console.log('产品子类型',this.popSelectInfo.productName,'++++',this.productSubTypeName)
      const res = await API.getprodList(params)
      if (res && res.data && res.data.code === 1000) {
        this.list = this.list.concat(res.data.data.list)
        if (this.list.length < res.data.data.count) {
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
          return
        }
      } else {
        this.loading = false
        this.finished = true
      }
    },
    handleChangeTab(name) {
      /* Cookie.remove('cookieOrgSel')
      Cookie.remove('cookieProTypeSel')
      Cookie.remove('cookieprodMeSel')
      Cookie.remove('paramsPro') */
      let paramsPro = []
      if(Cookie.get('paramsPro')) {
        paramsPro = JSON.parse(Cookie.get('paramsPro'))
        console.log('切换时',paramsPro)
        paramsPro.proTypeSel.length = 0
        Cookie.set("paramsPro",paramsPro)
      }
      
      
      
      
      this.productSubTypeName = name
      this.popSelectInfo.productSubType = name
      this.curPage = 0
      this.list = []
      this.onLoad()
    },
    handleSelect() {
      this.popShow = true
    },
    handleClosePop(val) {
      this.popShow = val
    },
    handelReset(obj) {
      // console.log('重置时：',obj.screenFlag)
      this.popSelectInfo.partnerId = obj.partnerId
      this.popSelectInfo.isOnline = obj.isOnline
      this.popSelectInfo.productSubType = obj.productSubType
      this.active = obj.productSubType
      this.screenFlag = obj.screenFlag
      this.list = []
      this.popShow = false
      this.curPage = 0
      this.onLoad()
    },
    handelConfirm(obj) {
      // console.log('确定时：',obj)
      this.popSelectInfo.partnerId = obj.partnerId
      this.popSelectInfo.isOnline = obj.isOnline
      this.popSelectInfo.productSubType = obj.productSubType
      this.active = obj.productSubType
      this.list = []
      this.popShow = false
      this.curPage = 0
      this.screenFlag = obj.screenFlag
      this.onLoad()
    },
    getLabelList(value) {
      if (value.indexOf(',') > -1) {
        return value.split(',')
      } else {
        return [value]
      }
    }
  }
}
</script>
<style scoped lang="less">
.header {
  padding: 7px 15px;
  box-sizing: border-box;
  background: #fff;
  .header-left {
    text-align: center;
    .header-left-list-item {
      background: #999;
      width: 19px;
      border: 1px solid #999;
      border-radius: 1.25px;
      margin: 0 auto;
      margin-bottom: 3px;
      &-text {
        font-size: 10px;
        color: #999;
        width: 30px;
      }
    }
    img {
      width: 20px;
      height: 26px;
      margin-right: 5px;
    }
  }
  .header-right {
    border-radius: 17px;
    width: 310px;
    flex: 1;
    .van-cell {
      background: #f5f5f5;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
      border-radius: 17px;
      height: 32px;
    }
  }
}
.header-tab {
  box-sizing: rgba(0, 0, 0, 0.05) 0 0 7px 0;
}
.pro-list-item {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 0.5px solid #f0f0f0;
}
.pro-list-item-left {
  position: relative;
  background: #fff9ee;
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 8px 0;
  border-radius: 4px;
  width: 86px;
  height: 86px;
  box-sizing: border-box;
  &-bg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 86px;
    height: 86px;
  }
  &-insurance {
    position: absolute;
    bottom: 0;
    width: 86px;
    height: 20px;
    line-height: 20px;
    // margin: 50px;
    background: #f68657;
    border-radius: 50% / 100% 100% 0 0;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
  }
}
.pro-list-item-right {
  flex: 1;
  margin-left: 15px;
  &-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    flex: 1;
  }
  &-title-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 16px;
    // line-height: 16px;
    // text-align: center;
    margin-left: 8px;
    border-radius: 4px;
    border: 0.5px solid @c-color-primary;
    background: #fde6dd;
    font-size: 12px;
    color: @c-color-primary;
    margin-top: 2px;
  }
  .active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 16px;
    // line-height: 16px;
    // text-align: center;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #1a73e8;
    background-color: #94d8f6;
    border: 0.5px solid #1a73e8;
    margin-top: 2px;
  }
  &-desc {
    font-size: 13px;
    color: #999;
    margin-top: 5px;
  }
  &-protype {
    font-size: 12px;
    color: #bd893a;
    // margin-left: 5px;
    margin-top: 5px;
    div {
      display: inline-block;
      margin-right: 5px;
    }
  }
  &-money {
    font-size: 17px;
    font-weight: bold;
    color: #ec4001;
    margin-top: 2px;
  }
}
// 筛选弹框
.pop-select {
  height: 100vh;
  width: 300px;
}
</style>
